<template>
  <div class="page">
    <du-nav-bar title="财务" :url-obj="{ path: '/', query: { redirect: '/finance' } }"></du-nav-bar>
    <div class="page-box">
      <div class="search-bar">
        <div class="date-input" @click="showStartPop = true">{{ selectedStartDate }}</div>

        <div class="date-input" @click="showEndPop = true">{{ selectedEndDate }}</div>

        <div class="btn-box">
          <van-button type="primary" block style="height: 100%" @click="onSearch">查询</van-button>
        </div>
      </div>
    </div>
  </div>
  <van-popup v-model:show="showStartPop" position="bottom">
    <van-datetime-picker
      v-model="pickerStartDate"
      type="year-month"
      title="选择年月"
      :min-date="minDate"
      :max-date="maxDate"
      :formatter="formatterYMD"
      @confirm="onStartConfirm"
      @cancel="onStartCancel"
    ></van-datetime-picker>
  </van-popup>
  <van-popup v-model:show="showEndPop" position="bottom">
    <van-datetime-picker
      v-model="pickerEndDate"
      type="year-month"
      title="选择年月"
      :min-date="minDate"
      :max-date="maxDate"
      :formatter="formatterYMD"
      @confirm="onEndConfirm"
      @cancel="onEndCancel"
    ></van-datetime-picker>
  </van-popup>
</template>

<script setup>
import { Notify } from 'vant'
import { useRangeDateTimePicker } from '@/hooks/vant/useDateTimePicker.js'
const {
  selectedStartDate,
  selectedEndDate,
  showStartPop,
  showEndPop,
  pickerStartDate,
  pickerEndDate,
  minDate,
  maxDate,
  formatterYMD,
  onStartConfirm,
  onEndConfirm,
  onStartCancel,
  onEndCancel,
} = useRangeDateTimePicker()

const onSearch = () => {
  console.log(selectedStartDate.value)
  console.log(selectedEndDate.value)
  if (DuUtil.isAfterDate(selectedStartDate.value, selectedEndDate.value)) {
    Notify({ type: 'warning', message: '起始时间不能大于结束时间' })
  }
}
</script>

<style scoped lang="scss">
.search-bar {
  padding: var(--app-padding);
  height: 82px;
  display: flex;
  .date-input {
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    flex: 3;
    height: 100%;
    margin-right: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--van-white);
  }
  .btn-box {
    height: 100%;
    overflow: hidden;
    flex: 2;
  }
}
</style>
